<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非单文件组件</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <school></school> <!--调用组件的构造函数，生成vc组件的实例对象-->
        <hr>
        <student></student>
    </div>
    <script type="text/javascript">
        // 创建school组件，返回的是vc组件的构造函数
        const school = Vue.extend({
            template: `
              <div>
              <h2>学校名称：{{ schoolName }}</h2>
              <h2>学校地址：{{ address }}</h2>
              </div>`,
            data() { // 注意，组件的data必须使用函数的形式，不能使用对象的方式，因为组件会复用，如果使用对象的方式，那么多个使用者使用该组件就会使用同一个数据，而使用方法的方式就返回一个新的data对象
                return {
                    schoolName: '黄埔军校',
                    address: '赛博坦18号'
                }
            }
        })
        const student = Vue.extend({
            template: `
              <div>
              <h2>学生姓名：{{ studentName }}</h2>
              <h2>学生年龄：{{ age }}</h2>
              </div>`,
            data() {
                return {
                    studentName: 'wjz',
                    age: 18
                }
            }
        })

        Vue.component('student',student); // 全局注册组件
        new Vue({
            el: '#app',
            components: { // 局部注册组件
                school,
                // student
            }
        })
    </script>
</body>
</html>